<template>
	<view class="container">
		<form @submit="bindSave" :report-submit="true">
			<tui-list-cell :hover="false" :lineLeft="false">
				<view class="tui-cell-input">
					<input name="amounts" @input="inputamounts" :placeholder="'输入提现金额,最少'+min_money+'元'"
						placeholder-class="tui-phcolor" type="text" :auto-focus="true" :focus="true" maxlength="40" />
				</view>
				<view class="uni-list">
					<view class="craditem" v-for="(checkitem,index) in cash_service_charge_list" :key="index"
						:class="days == checkitem.days.toString() ? 'active' : ''"
						:style="{ '--color': pagestyleconfig.appstylecolor }" @click="selradio" :data-index="index"
						:data-days="checkitem.days">
						T+{{ checkitem.days }} <block v-fi="checkitem.title">{{checkitem.title}}</block>
					</view>
				</view>
				<view class="tui-cell-text">
					手续费：{{poundage}}
				</view>
				<view class="tui-cell-text">
					实收：{{actual_amounts}}
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true" unlined :radius="true" @click="chooseMemberbankcard">
				<view class="tui-bg-img"></view>
				<view class="tui-address">
					<view v-if="memberbankcardData.accounts">
						<view class="tui-userinfo">
							<text class="tui-name">{{memberbankcardData.name}}</text>{{memberbankcardData.accounts}}
						</view>
						<view class="tui-addr">
							<text>{{memberbankcardData.bankname}}</text>
							<text v-if="memberbankcardData.branchname">{{memberbankcardData.branchname}}</text>
						</view>
					</view>
					<view class="tui-none-addr" v-else>
						<text>请选择收款帐号</text>
					</view>
				</view>
			</tui-list-cell>
			<view class="tui-btn-box">
				<tui-button formType="submit" :shadow="false" height="88rpx" shape="circle" type="danger">申请提现
				</tui-button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				min_money: '',
				days: 1,
				poundage: '',
				amounts: '',
				actual_amounts: '',
				mo: 'agent',
				memberbankcardData: [],
				cash_service_charge_list: [],
				pagestyleconfig: [],
			};
		},
		onLoad: function(options) {
			let _this = this;
			if (options.mo) {
				_this.mo = options.mo;
			}
			_this.$request.post('config', {
				mo: _this.mo
			}).then(res => {
				if (res.errno == 0) {
					_this.cash_service_charge_list = res.data.cash_service_charge_list
					_this.min_money = res.data.min_money
				}
			});
			_this.$request.post('config', {
				mo: 'pagestyle'
			}).then(res => {
				if (res.errno == 0) {
					_this.pagestyleconfig = res.data
				}
			});
		},
		onShow: function() {
			let _this = this
			_this.initmemberbankcard();
		},
		methods: {
			selradio: function(e) {
				var item = e.currentTarget.dataset.days.toString();
				var index = e.currentTarget.dataset.index;
				if (this.days == item) {
					this.days = '';
				} else {
					this.days = item;
				}
				this.calculate();
			},
			chooseMemberbankcard() {
				uni.navigateTo({
					url: "/pagesA/my/memberbankcard/memberbankcard"
				})
			},
			inputamounts(e) {
				let _this = this;
				_this.amounts = e.detail.value;
				_this.calculate();
			},
			calculate() {
				let _this = this;
				if (_this.days && _this.amounts) {
					_this.$request.post('withdraw.calculate', {
						mo: _this.mo,
						days: _this.days,
						amounts: _this.amounts,
						samkey: (new Date()).valueOf()
					}).then(res => {
						if (res.errno == 0) {
							_this.actual_amounts = res.data.actual_amounts;
							_this.poundage = res.data.poundage;
						}
					})
				}
			},
			initmemberbankcard: function() {
				var _this = this;
				_this.$request.get('memberbankcard.default', {
					samkey: (new Date()).valueOf()
				}).then(res => {
					if (res.errno == 0) {
						_this.memberbankcardData = res.data;
					} else {
						_this.memberbankcardData = null;
					}
				})
			},
			bindSave: function(e) {
				var _this = this;
				var bid;
				var amounts = e.detail.value.amounts;
				if (_this.memberbankcardData) {
					bid = _this.memberbankcardData.id;
				}

				if (!bid) {
					uni.showModal({
						title: '提示',
						content: '请选择收款帐号',
						showCancel: false
					})
					return
				}
				if (amounts == "" || amounts * 1 < _this.min_money) {
					uni.showModal({
						title: '提示',
						content: '提现金额不能少于' + _this.min_money + '元',
						showCancel: false
					})
					return
				}
				_this.$request.post('withdraw.apply', {
					mo: _this.mo,
					amounts: amounts,
					days: _this.days,
					bid: bid
				}).then(res => {
					if (res.errno == 0) {
						//console.log(res);
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({});
								}
							}
						})
					} else {
						uni.showModal({
							title: "提示",
							content: res.message,
							showCancel: false
						})
					}
				})
			}
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
		},
	};
</script>

<style lang="scss">
	.container {
		padding-top: 20rpx;

		.tui-cell-input {
			width: 100%;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			input {
				flex: 1;
				padding-left: $uni-spacing-row-base;
			}
		}

		.tui-cell-text {
			width: 100%;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			padding-left: 20rpx;
		}

		.tui-btn-box {
			padding: 40rpx 30rpx 10rpx 30rpx;
			box-sizing: border-box;
		}

		.uni-list {
			width: 100%;
			padding-top: 15rpx;
			padding-bottom: 20rpx;
			padding-left: 0rpx;
			padding-right: 0rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		.craditem {
			padding: 8rpx 24rpx;
			margin-right: 24rpx;
			margin-bottom: 16rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 2rpx solid #999999;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			text-align: left;
		}

		.active {
			border: 2rpx solid var(--color);
			color: var(--color);
			position: relative;
		}

		.active::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 0;
			height: 0;
			border-top: 42rpx solid var(--color);
			border-left: 42rpx solid transparent;
		}

		.active::before {
			width: 8rpx;
			height: 12rpx;
			border-color: #FFFFFF;
			border-style: solid;
			border-width: 0 1rpx 2rpx 0;
			content: "";
			position: absolute;
			right: 8rpx;
			top: 2rpx;
			z-index: 3;
			transform: rotate(45deg);
		}
	}
</style>